<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="cartView" @click="showList=!showList">
			<uni-icons v-if="showList" type="cart-filled" color="#f0899c" size="30"></uni-icons>
			<uni-icons v-else type="cart" color="#f0899c" size="30"></uni-icons>
		</view>
		<cartList :class="{cartList:true,show:showList}" @closeCast="showList=false"></cartList>
	</view>
</template>

<script setup>
	import cartList from './cart.vue'
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme
	} = storeToRefs(systemStore);
	
	const emit = defineEmits(['update:modelValue' ]);
	const props = defineProps({
		/**是否checked */
		modelValue: {
			type: Boolean,
			default: 0
		},  
	})  
	const showList = computed({
		get: () => {
			if(!props.modelValue)
				return false
			return props.modelValue
		},
		set: (val) => {
			emit('update:modelValue', val)
		}
	}); 
	
	//let showList=ref(false)
</script>

<style lang="scss" scoped>
	.bodyView {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		bottom: 80rpx;
		right: $mainPadding;
	}
	.cartList{
		width: 0;
		height: 0; 
		position: absolute; 
		border-radius: $mainPadding; 
		transform: translate(calc(-100% + $mainPadding + 20rpx) ,-100%);
		transition: all 0.35s ease-in-out;
		z-index: 1001;
		opacity: 0;
		@include useTheme {
			background-color: getValue('bgColor');
			//box-shadow: 0 0 20px 7px  getValue('boxShadow');
		}
		&.show{
			opacity: 1;
			width: 80vw;
			height: 80vh; 
		}
	}
	.cartView {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		z-index: 1002;
		// transform: translate(-100%,-100%);
		@include useTheme {
			background-color: getValue('bottombgColor');
		}

		@include flex-teng;
		// .uni-icons{
		// 	color: $mainColor !important;
		// }
	}
</style>